<template>
  <!--地图显示 -->
  <map :longitude="longitude" :latitude="latitude" :polyline="polyline" bindmarkertap="showModal" :markers="markers" show-location>      
    <cover-view class="navigate" @click="showNavigate">查看路线</cover-view>     
  </map>   
</template>

<script>

// 引入SDK核心类
// var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');
import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js'
// 实例化API核心类
const qqmapsdk = new QQMapWX({
	key: '55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT'
});

export default {
  data () {
    return {
      longitude: null,
		  latitude: null,
		  markers: null,
	  	scale: 16,
		  includePoints: [],
      address:null,
      distanceArr:[],
		  addressArr: [         
        [113.953768, 22.53327,"粤美特大厦点位"],
        [114.05959, 22.546513,"深圳书城点位点位"],
        [114.097927, 22.549218,"红荔邮政点位"],
        [113.952696, 22.530438,"科技生态园11栋A座点位"], 
        [113.952494, 22.529351,"科技生态园5栋C座点位"], 
        [113.952617, 22.530753,"科技生态园8栋A座点位"]                            
      ],
      polyline:[],
      minLatitude:null,
      minLongitude:null,
      minAddressName:null,
    }
  },

  mounted() {
    //接收参数
    this.minLatitude = this.$root.$mp.query.minLatitude;    
    this.minLongitude = this.$root.$mp.query.minLongitude;
    this.minAddressName = this.$root.$mp.query.minAddressName;
    let minDistance = this.$root.$mp.query.minDistance;
    let markersArr = [];

    //遍历点位
    this.addressArr.forEach((item,index)=> {
      //每个点位的信息
      markersArr.push({
        id: index,
				longitude: item[0],
				latitude: item[1],
				iconPath: '../../static/images/icon.png',
				width: 40,
        height: 40,
        callout:{
          content:"",
          bgColor:"#fff",
          padding:"",
          borderRadius:"2px",
          borderWidth:"",
          borderColor:"#07c160",
          display:"ALWAYS"
        }
      })
      this.longitude = item[0];
      this.latitude = item[1];
      this.markers = markersArr;
      if(this.minLatitude == JSON.parse(JSON.stringify(item))[1]) {
        //最近的点位用不同样式
        this.markers[index].iconPath = "../../static/images/icon2.png"; 
        this.markers[index].callout.content = `${this.addressArr[index][2]}，距您${minDistance}米`
        this.markers[index].callout.borderWidth = "1px"
        this.markers[index].callout.padding = "5px"
      }                      
    })
  },
  
  methods: {    
    //腾讯地图导航
    showNavigate() {
      let plugin = requirePlugin('routePlan');
      let key = '55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT'; 
      //调用插件的app的名称
      let referer = 'postore游享'; 
      //终点
      // let endPoint = JSON.stringify({  
      //   'name': this.minAddressName,
      //   'latitude': this.minLatitude,
      //   'longitude': this.minLongitude
      // });
      //跳转到腾讯地图
      // wx.navigateTo({
      //   url: 'plugin://routePlan/index?key=' + key + '&referer=' + referer + '&endPoint=' + endPoint
      // });	

      //跳转到其他导航
      wx.openLocation({
        latitude:Number(this.minLatitude),	//维度
        longitude: Number(this.minLongitude), //经度
        name: this.minAddressName,	//目的地定位名称
        scale: 15,	//缩放比例
      })    
    },
    //描绘路径
    showLine() {
      var that = this;   
//       wx.request({
//         url:'https://apis.map.qq.com/ws/direction/v1/walking/',
//         data:{
//             from: `${that.latitude},${that.longitude}`,
//             to: `${that.minLatitude},${that.minLongitude}`,
//             policy: 'REAL_TRAFFIC',
//             key:'55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT',
//         },        
//         header:{
//           'content-type':'application/json'
//         },
//         //url:`https://apis.map.qq.com/ws/direction/v1/driving/?from=${that.latitude},${that.longitude}&to=${that.minLatitude},${that.minLongitude}&output=json&callback=cb&key=55RBZ-SPDKD-CWC44-HTISE-SUVQZ-BYFMT`,
//         success:function(res) {
//           const coors = res.data.result.routes[0].polyline;          
//           for(var i=2; i< coors.length; i++) { 
//             coors[i]= coors[i-2]+ coors[i]/1000000 
//           }
//           var b=[]; 
//           for(var i=0; i< coors.length; i=i+2) { 
//             b[i/2]={latitude: coors[i],longitude:coors[i+1] }; 
//           }         
//           that.polyline = [{points: b, color:"#169bd5", width:8, dottedLine:false }]
//         }
//       })
    }   
  }
}
</script>

<style scoped lang="stylus">
  map
    width 100%
    height 100vh
    .navigate
      width 600rpx
      height 80rpx
      background #199ed8
      border-radius 20rpx
      text-align center
      line-height 80rpx
      color #fff
      position fixed
      bottom 30rpx
      left 50%
      margin-left -300rpx
      z-index 2000
</style>


